<template>
<div class="welcome">
  <content-header :show-title="false"/>
  <div class="welcome-box">
    <div class="left-icon"><el-icon><IconRobot/></el-icon></div>
    <div class="content">
      <div class="top-content">
        <div class="content-wrapper">
          <div class="greeting">
            你好。<br/>
            我是AI医聊，请问有什么可以帮你的吗？
            <div class="sub-tip">作为一个人工智能语言模型，我可以回答你的问题，为你提供有用信息，提升工作、学习的效率。比如帮你翻译文字、创作论文、编写文案、答疑解惑等</div>
          </div>
         <div class="recommend-tip">
           <div class="title">友情提示</div>
           AI医聊的语言模型是OPEN AI的3.5版本模型，目前还不支持4.0版本，但我们的工程师正在努力完成对接，请耐心等待！
           免费帐户在同一设备上最多只能提问20次，更多高级功能敬请升级体验！
         </div>
        </div>
      </div>
    </div>
  </div>
</div>
</template>

<script lang="ts" setup>
import ContentHeader from "@/components/contentHeader.vue";
import IconRobot from "@/components/icons/IconRobot.vue";
</script>

<style lang="less" scoped>
.welcome-box {
  width: 60%;
  margin: 72px auto;
  display: flex;
  .left-icon{
    width: 40px;
    height: 40px;
    font-size: 32px;
    margin-right: 26px;
  }
  .content-wrapper {
    background: #F2F4F5;
    border-radius: 0 24px 24px 24px;
    padding: 22px 31px;
    .greeting {
      font-weight: 600;
      font-size: 22px;
      color: #36444E;
      letter-spacing: 0;
      line-height: 32px;
      .sub-tip {
        font-weight: 200;
        font-size: 15px;
        color: #36444E;
        letter-spacing: 0;
      }
    }
    .recommend-tip{
      margin-top: 32px;
      font-size: 14px;
      font-weight: 200;
      line-height: 30px;
      letter-spacing: 0;
      color: #36444E;
      text-align: left;
      .title {
        color: #207bf8ff;
      }
    }
  }
}
</style>